<template>
    <div>
        <el-container>
            <el-header>Header</el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu router>

                        <div v-for="(item, index) in this.$router.options.routes"
                                  :key="index">
                        <el-submenu index="1" v-if="!item.hidden
">

                            <template  slot="title">
                                <i class="el-icon-location"></i>
                                <span >{{item.name}}</span>
                            </template>
                            <el-menu-item :index="children.path" v-for="(children,indexj) in item.children"
                            :key="indexj">
                              {{children.name}}
                            </el-menu-item>
                        </el-submenu>
                        </div>

                    </el-menu>

                </el-aside>
                <el-container>
                    <el-main>
                        <router-view />
                    </el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Home.vue"
        }

</script>

<style scoped>

</style>